<!--
* @description 选择合同列表
  @params dialogFormVisible 显示
  @params saveContractId 存储方法
  @params apiName_params 列表接口名
!-->

<!-- 单页面需要多个上传组件 -->
<template>
	<div>
		<el-dialog title="选择记录（多选记录点击确认）"  :before-close="tableSelect" :visible.sync="dialogFormVisible" width="80%">
			<div>
				<div style="margin-bottom:20px">
					<div class="flex-row rightSearchBlock-search">
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">检码单号</div>
							<el-input v-model="searchList.checkCode" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">船名/提单号</div>
							<el-input v-model="searchList.shipNameLadingBillCode" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">仓库名称</div>
							<el-input v-model="searchList.warehouseName" placeholder="" size="small" />
						</div>
					</div>
					<div class="flex-row rightSearchBlock-search">
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">堆号</div>
							<el-input v-model="searchList.heap" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">入库外标</div>
							<el-input v-model="searchList.inTotal" placeholder="" size="small" />
						</div>
						<div class="search-item flex-row flex-alignCenter">
							<div class="key2">树种</div>
							<el-select clearable size="small" filterable v-model="searchList.treeType" placeholder="">
								<el-option v-for="item in $store.state.typeAllList['树种']" :key="item.id" :label="item.name" :value="item.name">
								</el-option>
							</el-select>
						</div>
					</div>
					<div class="rightSearchBlock-search">
						<el-button size="small" @click="getData()" type="primary" style="height: 34px">
							<div class="flex-center">
								<img src="@/assets/icon/search.png" class="button-icon" alt />
								查询
							</div>
						</el-button>
						<el-button class size="small" @click="clear" type>
							<div class="flex-center">
								<img src="@/assets/icon/reset.png" class="button-icon" alt />
								重置
							</div>
						</el-button>
					</div>
				</div>
				<!-- 表格 -->
				<div style="margin-top: 10px">
					<el-table :data="tableData.records" ref='multipleTable' style="width: 100%" class="tableScroll" highlight-current-row @current-change="" @selection-change="handleSelectionChange" row-key="id">
						<el-table-column type="selection" width="55" :reserve-selection="true">
						</el-table-column>
						<!-- <el-table-column
              prop="groupType"
              label="集团分类"
              
              
            ></el-table-column> -->
						<!-- <el-table-column
              prop="purchaseContractCode"
              label="采购合同编号"
              width="120"
              
              
            ></el-table-column> -->
						<el-table-column prop="checkCode" label="检码单号" width='120'></el-table-column>
						<el-table-column prop="goodsType" label="类型"></el-table-column>
						<el-table-column prop="goodsName" label="品名" :width="flexColumnWidth('goodsName',tableData.records)"></el-table-column>
						<el-table-column prop="inTotal" label="入库外标"></el-table-column>
						<!-- <el-table-column
              prop="grade"
              label="品级"
              
              
            ></el-table-column> -->
						<!-- <el-table-column
              prop="inUnitCost"
              label="入库单位成本"
              
              width="120"
              
            ></el-table-column>
            <el-table-column
              prop="unitWeightedAverageCost"
              label="单位加权平均成本"
              width="140"
              
            ></el-table-column>
            <el-table-column
              prop="taxRate"
              label="税率(%)"
              width="120"
            ></el-table-column> -->
						<el-table-column prop="inDate" label="入库时间" width="120"></el-table-column>
						<!-- <el-table-column prop="isCheckSize" label="是否检尺">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.isCheckSize ? "检尺" : "不检尺" }}
                </div>
              </template></el-table-column
            > -->
						<el-table-column prop="warehouseName" label="仓库名称" width="120" :width="flexColumnWidth('warehouseName',tableData.records)"></el-table-column>
						<!-- <el-table-column
              prop="location"
              label="库位"
              width="120"
            ></el-table-column> -->
						<el-table-column prop="shipNameLadingBillCode" label="船名/提单号" :width="flexColumnWidth('shipNameLadingBillCode',tableData.records)"></el-table-column>
						<el-table-column prop="treeType" label="树种" :width="flexColumnWidth('treeType',tableData.records)"></el-table-column>
						<el-table-column prop="heap" label="堆号" width="120"></el-table-column>
						<!-- <el-table-column
              prop="quantity"
              label="根(件)数"
              width="120"
            ></el-table-column> -->
						<el-table-column prop="nationQuantity" label="国标" width="120"></el-table-column>
						<el-table-column prop="foreignQuantity" label="外标" width="120"></el-table-column>
						<!-- <el-table-column
              prop="unit"
              label="单位"
              width="120"
            ></el-table-column>
            
            <el-table-column
              prop="inBillId"
              label="入库单"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              width="120"
            ></el-table-column> -->
					</el-table>
				</div>
				<!-- 分页 -->
				<div v-if="tableData.total" class="block" style="margin-top: 10px; text-align: right">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchList.pageNum" :page-size="searchList.pageSize" layout="sizes,total, prev, pager, next, jumper" :page-sizes="[7, 20, 30, 40]" :total="Number(tableData.total)"></el-pagination>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="tableSelect(selectList)">确 定</el-button>
				<el-button @click="tableSelect">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	name: 'page',
	props: {
		dialogFormVisible: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			tableData: { records: [{}] },
			searchList: {
				pageNum: 1,
				pageSize: 7,
			},
			selectList: [],
		};
	},
	created() {
		this.getData();
	},
	methods: {
		//重置按钮
		clear() {
			this.searchList = this.$options.data().searchList; //用原始data里的对象替代现有对象
			this.getData();
		},
		handleSelectionChange(val) {
			console.log(val);
			this.selectList = val;
		},
		//增加搜索条件
		addSearchCriteria(key, value) {
			this.searchList[key] = value;
			console.log(this.searchList);
		},
		tableSelect(val) {
			if (val[0] && val[0].id) {
				val = this.cloneObjectFn(val);
			}
      this.$refs.multipleTable.clearSelection();
			this.$emit('saveId', val);
		},
		//分页选择每页多少条
		handleSizeChange(val) {
			this.searchList.pageSize = val;
			this.getData();
		},
		//分页当前页
		handleCurrentChange(val) {
			this.searchList.pageNum = val;
			this.getData();
		},
		getData(pageNum) {
			var apiName = 'page_inventory';
			this.$myApi[apiName](this.searchList).then((res) => {
				if (res.code == 200) {
					this.tableData = res.data;
				}
			});
		},
	},
};
</script>
<style scoped>
.key2 {
	margin-right: 10px;
	white-space: nowrap;
}
</style>
